<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志管理</title>
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">
    <link rel="stylesheet" href="../header/notice.css">

    <!-- 引入 Vue.js 和 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入Vue框架 -->
    <script type="text/javascript" src="../lib/js/vue.js"></script>
    <!-- 引入axios库 -->
    <script type="text/javascript" src="../lib/js/axios.js"></script>
    <!-- 引入自定义js文件 -->
    <script type="text/javascript" src="../lib/js/config.js"></script>
</head>
<body >


    <div class="app-container" id="app">
        <div class="row content-container">
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body padding-top">
                    <div class="row">
                        <header>
                            <h1>日志管理</h1>
                        </header>
                        <nav>
                            <ul>
                                <li><a href="../html/index.html">返回首页</a></li>
                            </ul>
                        </nav>
                        <div class="container">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>操作事件</th>
                                        <th>操作时间</th>
                                        <th>操作人</th>
                                        <th>操作ip</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="log in logList" :key="log.id">
                                        <td>{{ log.id }}</td>
                                        <td>{{ log.content }}</td>
                                        <td>{{ log.time }}</td>
                                        <td>{{ log.operator }}</td>
                                        <td>{{ log.ip }}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <!-- 分页 -->
                            <div class="paging">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item" :class="{ disabled: currentPage === 1 }">
                                            <a class="page-link" href="#" @click.prevent="getLogList(currentPage - 1)">上一页</a>
                                        </li>
                                        <li class="page-item" v-for="page in pageList" :key="page" :class="{ active: currentPage === page }">
                                            <a class="page-link" href="#" @click.prevent="getLogList(page)">{{ page }}</a>
                                        </li>
                                        <li class="page-item" :class="{ disabled: currentPage === pageList.length }">
                                            <a class="page-link" href="#" @click.prevent="getLogList(currentPage + 1)">下一页</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>





    <script>
        new Vue({
            el: '#app',
            data: {
                logList: [],
                currentPage: 1, // 初始化为1
                pageList: [], // 分页列表
                log:{
                    id: '',
                    content: '',
                    time: '',
                    operator: '',
                    ip: ''
                }
            },
            created() {
                this.getLogList(this.currentPage);
            },
            methods: {
                getLogList(page) {
                    if (page < 1) return; // 防止页码小于1
                    axios.get('/log/list/'+page).then(response => {
                        // 确保后端返回的数据格式是 { data: { logs: [], pageList: [] } }
                        this.logList = response.data.data['logList'];
                        this.pageList = response.data.data['pageList'];

                        this.currentPage = page;
                    }).catch(error => {
                        console.error('There was a problem with the fetch operation:', error);
                    });
                },
               
            }
        });
    </script>
</body>
</html>